<script setup>
import { ref, defineEmits, defineProps } from "vue";
const props = defineProps({
  tabs: Array,
});
const emit = defineEmits(["onSwitch"]);
const activeNav = ref(0);
const initTab = (value) => {
  activeNav.value = value;
};
const switchTab = (e) => {
  activeNav.value = e.currentTarget.dataset.index;
  emit("onSwitch", activeNav.value);
};
console.log(props.tabs);
</script>

<template>
  <nav class="m-nav">
    <ul>
      <li
        v-for="(tab, index) in tabs"
        class="ms-one-line"
        :class="activeNav == tab.value ? 'nav-active' : ''"
        :data-index="tab.value"
        @click="switchTab"
        :key="index"
      >
        {{ tab.text }}
      </li>
    </ul>
  </nav>
</template>


<style scoped lang="scss">
.m-nav {
  ul {
    display: flex;
    display: -webkit-flex;
    position: relative;
    li {
      float: left;
      flex: 1;
      background-color: #fff;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.9);
      position: relative;
      text-align: center;
      &.nav-active {
        color: #276fe8;
        &:after {
          content: " ";
          display: block;
          width: 70%;
          height: 2px;
          background: #276fe8;
          position: absolute;
          bottom: -13px;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1;
        }
      }
    }
  }
  ul::after {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: -13px;
  }
}
</style>
